<template>
	<div>
		<div id="swiper" v-for="(item,index) in $store.state.SwiperColumns.charts">
			<van-nav-bar :border='false'>
				<template #left><h3>{{item.name}}</h3></template>
			  <template #right v-if="item.url">
				<van-icon name="arrow" size="18" color="#389eac"/>
			  </template>
			</van-nav-bar>
			
			<van-swipe :loop="false" :width="ImgWidth" :show-indicators='false'>
			  <van-swipe-item v-for="booklist in item.columns">
				  <div class="swiperContent">
					  <div class="boxImg"><img :src="booklist.coverUrl"></div>
					  <h3>{{booklist.title}}</h3>
					  <p class="author">{{booklist.author}}</p>
					  <p class="inLibraryCount">{{booklist.inLibraryCount}} 人加入书架</p>
				  </div>
			  </van-swipe-item>
			</van-swipe>
		</div>
		
	</div>
</template>

<script>
	import Vue from 'vue';
	import { Swipe, SwipeItem } from 'vant';
	import { NavBar } from 'vant';
	
	
	Vue.use(NavBar);
	
	Vue.use(Swipe);
	Vue.use(SwipeItem);
	
	export default{
		data(){
			return{
				ImgWidth:parseFloat(document.documentElement.clientWidth/3)
			}
		},
		mounted(){
			this.$store.dispatch('getSwiperColumns');
			
			window.onresize=()=>{
				if(document.getElementsByClassName('van-swipe')){
					var w= document.getElementsByClassName('van-swipe')[0].offsetWidth
					this.ImgWidth=w/3
				}
			}

		},

	}
</script>

<style lang="scss">
	#swiper{
		background-color: #F8F9F9;
		margin-top: 0.625rem;
		padding: 0 0.9375rem;
		box-sizing: border-box;
	}
   .van-swipe-item{
		color: #fff;
		font-size: 1.25rem;
		line-height: auto;
		
		.swiperContent{
			padding-right: 0.9375rem;
			box-sizing: border-box;
		}
		.boxImg{
			img{
				width: 100%;
				height: 100%;
				border-radius: 0.25rem;
				box-shadow: 0.0625rem 0.0625rem 0.125rem black;
			}
		}
		p,h3{
			overflow: hidden;
			text-overflow: ellipsis;
			display:-webkit-box; 
			-webkit-box-orient:vertical;
			font-size: 0.75rem;
			line-height: 1rem;
		}
		h3{
			color: #333;
			margin-top: 0.375rem;
			-webkit-line-clamp:2;
		}
		.author{
			color: #737373;
			-webkit-line-clamp:1; 
		}
  }
  .inLibraryCount{
		color: #737373;
		font-size: 0.75rem;
		margin-top: 0.3125rem;
	}
	
	
	// 头
	#swiper{
		.van-nav-bar__content{
			background-color: #F8F9F9;
		}
		  .van-nav-bar__left{
		    color: #333;
		  }
		  .van-nav-bar__left,.van-nav-bar__right{
		    padding: 0;
		  }
	}
	
	
</style>